<template>
  <el-empty v-if="dailyItemInfo.itemList.length === 0"/>

  <div v-else class="bill-daily-item card-item">
    <daily-summary :date="dailyItemInfo.date">
      <template #extra>
        <span>收入：{{ formatAmount(dailyItemInfo.totalIncome, true) }}</span>
        <span>支出：{{ formatAmount(dailyItemInfo.totalExpensive, true) }}</span>
      </template>
    </daily-summary>

    <div class="daily-list">
      <daily-card v-for="(item, index) in dailyItemInfo.itemList"
                  :key="index" @click="selectBillRecordClick(item)"
                  :title="item.category" :content="item.content">
        <template #icon>
          <i :class="getCategoryByName(billStore.billCategoryList, item.category).icon"
             :style="{color: getCategoryByName(billStore.billCategoryList, item.category).color}">
          </i>
        </template>

        <template #content>
          <span v-if="item.location" class="location">
            <i class="fa-solid fa-location-dot"></i>
            {{ item.location }}
          </span>
        </template>

        <template #extra>
          <span>{{ formatAmount(item.amount, true) }}</span>
          <span>{{ item.payAccount }}</span>
        </template>
      </daily-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import DailySummary from '@/components/DailySummary.vue'
import DailyCard from '@/components/DailyCard.vue'
import { defineProps, onMounted, reactive, watch } from 'vue'
import { useBillStore } from '@/store/bill.ts'
import { useRouter } from 'vue-router'
import { formatChineseDate } from 'vue3-common/utils/dateUtil'
import { IBillRecord } from '@/types/bill.ts'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { formatAmount } from 'vue3-common/utils/numberUtil'
import { getCalendarDailyCount, getCategoryByName } from '@/utils/home/billUtil.ts'
import { isMobile } from 'vue3-common/utils/layoutUtil'

const billStore = useBillStore()
const router = useRouter()

const props = defineProps({
  date: {
    required: true,
    type: String
  }
})

watch(() => props.date, () => {
  getBillDailyByDate(props.date as string)
})

watch(() => billStore.isRefresh, () => {
  getBillDailyByDate(props.date as string)
})

onMounted(() => {
  getBillDailyByDate(props.date as string)
})

const dailyItemInfo = reactive({
  date: '',
  totalExpensive: 0,
  totalIncome: 0,
  itemList: [] as IBillRecord[]
})

/**
 * 根据日期获取当天的收支记录
 * @param date
 */
const getBillDailyByDate = (date: string) => {
  if (date) {
    dailyItemInfo.date = formatChineseDate(date, 'MM月DD日 dddd')

    const calendarDaily = getCalendarDailyCount(billStore.billRecordList, date)
    dailyItemInfo.itemList = calendarDaily.dailyRecordList
    dailyItemInfo.totalIncome = calendarDaily.totalIncome
    dailyItemInfo.totalExpensive = calendarDaily.totalExpensive
  } else {
    dailyItemInfo.itemList = []
  }
}

/**
 * 点击账单记录按钮
 * @param billRecord 账单记录
 */
const selectBillRecordClick = async (billRecord: IBillRecord) => {
  await billStore.queryBillRecord(billRecord.id as number)
  billStore.billApiType = 'UPDATE'

  if (isMobile()) {
    await router.push({
      name: 'BillDetailId',
      params: { id: billStore.currentBillRecord.id }
    })
  } else {
    billStore.billDialog = {
      title: '编辑账单',
      visible: true,
      data: deepCopyObject(billStore.currentBillRecord)
    }
  }
}
</script>

<style lang="scss">
.bill-daily-item {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding: 1vh 0.5vw;

  .daily-list {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    overflow: auto;
  }
}
</style>
